<template>
  <div class="mod-config">
    <basic-container>
      <navigationRenWuShu
        :sign="{ a: true, b: false, c: false, d: false, e: false, f: false }"
      ></navigationRenWuShu>
      <div class="boxsty zhiBiao">
        <div :height="searchheight">
          <span
            style="float: right; margin-top: -30px; cursor: pointer"
            @click="searchchangeadvanced"
            >{{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
            <i
              :class="
                searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
              "
            />
          </span>
          <div v-show="searchadvanced">
            <el-form
              :inline="true"
              :model="dataForm"
              @keyup.enter.native="getDataList()"
              class="form-inline"
              label-width="120px"
            >
              <el-form-item label="任务书名称">
                <el-input
                  style="width: 150px"
                  v-model="dataForm.workAssignName"
                  placeholder="任务书名称"
                  :clearable="true"
                ></el-input>
              </el-form-item>
              <el-form-item label="被考核人姓名">
                <el-input
                  v-model="dataForm.ryName"
                  placeholder="被考核人姓名"
                  :clearable="true"
                  style="width: 150px"
                ></el-input>
              </el-form-item>

              <el-form-item label="被考核人岗位">
                <el-input
                  v-model="dataForm.userZw"
                  placeholder="被考核人岗位"
                  :clearable="true"
                  style="width: 150px"
                ></el-input>
              </el-form-item>
              <el-form-item label="被考核人职级">
                <el-input
                  style="width: 150px"
                  v-model="dataForm.userZj"
                  placeholder="被考核人职级"
                  :clearable="true"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  icon="el-icon-search"
                  type="primary"
                  class="marginLeft"
                  @click="getDataList()"
                  >检索
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div style="height: 50px; border-bottom: 1px solid #b0bde2">
          <div class="pull-right">
            <el-button plain type="primary" @click="mingxi">文本模式</el-button>
            <el-button
              type="primary"
              plain
              @click="agree('liebiao')"
              v-loading.fullscreen.lock="fullscreenLoadingnd"
              >同意</el-button
            >
            <el-button
              type="primary"
              plain
              @click="backAll('liebiao')"
              v-loading.fullscreen.lock="fullscreenLoadingnd"
              >驳回</el-button
            >
          </div>
        </div>
        <div class="avue-crud">
          <el-table
            ref="table"
            style="width: 100%; margin-top: 20px"
            :data="dataList"
            border
            v-loading="dataListLoading"
          >
            <el-table-column
              type="selection"
              width="55"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              type="index"
              width="60"
              header-align="center"
              align="center"
              label="序号"
            ></el-table-column>
            <el-table-column
              prop="workAssignName"
              header-align="center"
              align="center"
              width="160"
              show-overflow-tooltip
              label="任务书名称"
            >
              <template slot-scope="scope">
                <span
                  @click="editBtn(scope.row, scope.$index)"
                  style="color: #0e258c; cursor: pointer"
                  >{{ scope.row.workAssignName }}</span
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="userName"
              header-align="center"
              align="center"
              min-width="150"
              label="被考核人编号"
            >
            </el-table-column>
            <el-table-column
              prop="ryName"
              header-align="center"
              align="center"
              min-width="150"
              label="被考核人姓名"
            >
            </el-table-column>
            <el-table-column
              prop="userDeptName"
              header-align="center"
              align="center"
              min-width="150"
              label="被考核人单位"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="userZw"
              header-align="center"
              align="center"
              min-width="170"
              label="被考核人岗位"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="userZj"
              header-align="center"
              align="center"
              min-width="170"
              label="被考核人职级"
            >
            </el-table-column>
            <el-table-column
              prop="weight"
              header-align="center"
              align="center"
              min-width="60"
              label="权重"
            >
              <template slot-scope="scope">
                <span
                  :style="{ color: scope.row.weight !== '100' ? 'red' : '' }"
                  >{{ scope.row.weight }}</span
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="stateExplain"
              header-align="center"
              align="center"
              width="140"
              label="任务书状态"
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="avue-crud__pagination">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            background
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
      </div>
      <!--进入页面就展示的详情-->
      <el-dialog
        v-if="dataList.length > 0"
        :title="carouselForm.workAssignName"
        :visible.sync="centerDialogVisible && dataList.length > 0"
        width="70%"
        :show-close="false"
        center
      >
        <div>
          <table border="1" class="carouselBox" style="width: 100%">
            <tbody>
              <tr>
                <td>被考核人姓名:</td>
                <td>被考核人编号:</td>
                <td>单位:</td>
                <td>职务:</td>
                <td>岗位:</td>
                <td>考核周期:</td>
              </tr>
              <tr>
                <td>{{ carouselForm.ryName }}</td>
                <td>{{ carouselForm.userName }}</td>
                <td>{{ carouselForm.userDeptName }}</td>
                <td>{{ carouselForm.userZj }}</td>
                <td>{{ carouselForm.userZw }}</td>
                <td>
                  {{ carouselForm.workAssignYxqq }}至{{
                    carouselForm.workAssignYxqz
                  }}
                </td>
              </tr>
            </tbody>
          </table>
          <div class="btns2" @click="prevBtn"><i class="el-icon-arrow-left" style="color:#fff"></i></div>
          <el-carousel
            style="margin-top: 20px"
            indicator-position="none"
            ref="carouselRef"
            direction="vertical"
            :autoplay="false"
          >
            <el-carousel-item
              v-for="item in dataList"
              style="overflow-y: auto"
              :key="item.id"
            >
              <el-table
                :data="carouselData"
                border
                style="width: 100%"
                v-loading="carouselLoading"
              >
                <el-table-column
                  prop="zhibiaoType"
                  label="指标类别"
                  min-width="90"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="zhibiaoName"
                  label="指标名称"
                  min-width="120"
                  show-overflow-tooltip
                  header-align="center"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="weight"
                  label="权重(%)"
                  min-width="110"
                  header-align="center"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="formulaId"
                  label="计算公式"
                  min-width="180"
                  header-align="center"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>
                      <span v-for="item in formulaOptions">
                        <span v-if="scope.row.formulaId == item.id">{{
                          item.gsMc
                        }}</span>
                      </span>
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="targetValue"
                  label="目标值"
                  min-width="90"
                  header-align="center"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="unit"
                  label="单位"
                  min-width="90"
                  header-align="center"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="targetValueType"
                  label="完成值获取方式"
                  min-width="180"
                  header-align="center"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span v-for="item in typeList">
                      <span v-if="scope.row.targetValueType == item.value">{{
                        item.name
                      }}</span>
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="khrName"
                  label="考核人"
                  min-width="180"
                  header-align="center"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="dataProviderId"
                  label="数据提供部门/人"
                  min-width="180"
                  header-align="center"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div>
                      <span v-if="scope.row.tgLx == 2">
                        {{ scope.row.targetUserName }}
                      </span>
                      <span v-else>
                        {{ scope.row.dataProvider }}
                      </span>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-carousel-item>
          </el-carousel>
          <div class="btns" @click="nextBtn"><i class="el-icon-arrow-right" style="color:#fff"></i></div>
          <div style="text-align: right">
            第{{ carouselIndex + 1 }}页/共{{ dataList.length }}页
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button plain type="primary" @click="agree('wenben')"
            >同意</el-button
          >
          <el-button plain type="primary" @click="backAll('wenben')"
            >驳回</el-button
          >
          <el-button plain type="primary" @click="centerDialogVisible = false"
            >列表模式</el-button
          >
        </span>
      </el-dialog>
    </basic-container>
    <commomDialog ref="commomDialog" @editChildren="getDataList"></commomDialog>
  </div>
</template>

<script>
import {
  getPageForWb,
  updateStatusByWbsh,
} from "@/api/hetongrenwu/book/bookWbhz";
import { getListByzbnd } from "@/api/hetongrenwu/book/bookcj";
import { getFormula } from "@/api/hetongrenwu/hetongyeji/hetongzb";
import { mapGetters } from "vuex";
import store from "@/store";
import commomDialog from "../commomDialog";
export default {
  components: {
    commomDialog,
  },
  data() {
    return {
      dataForm: {
        key: "",
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      searchheight: 0,
      searchadvanced: true,
      fullscreenLoadingwb: false,
      dataListLoading: false,
      fullscreenLoadingnd: false,
      carouselLoading: false,
      centerDialogVisible: false,
      carouselForm: {},
      carouselData: [],
      carouselIndex: 0,
      typeList: [
        { name: "手工填报", value: "0" },
        { name: "自动获取", value: "1" },
      ],
      formulaOptions: [],
      indexs: 0,
    };
  },
  watch: {},
  created() {
    this.getDataList();
    this.getXiaLa();
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  methods: {
    getXiaLa() {
      getFormula().then((res) => {
        this.formulaOptions = res.data.data;
      });
    },
    mingxi() {
      if (this.dataList == null || this.dataList.length == 0) {
        this.$message.warning("没有数据!");
        return;
      }
      this.getCarouseldata(this.dataList[0]);
      this.carouselForm = this.dataList[0];
      this.centerDialogVisible = true;
      this.indexs = 0;
    },
    // 编辑
    editBtn(row, index) {
      this.carouselIndex = index;
      this.indexs = index;
      this.getCarouseldata(row);
      this.carouselForm = row;
      this.centerDialogVisible = true;
    },
    nextBtn(){
      this.indexs++;
      if (this.indexs == this.totalPage) {
        this.indexs = 0;
      }
      this.carouselIndex = this.indexs;
      this.dataList.forEach((item, n) => {
        if (this.indexs == n) {
          this.getCarouseldata(item);
          this.carouselForm = item;
        }
      });
    },
    prevBtn(){
      this.indexs--;
      if (this.indexs==0) {
        this.indexs = this.totalPage;
      }
      if (this.indexs== -1) {
        this.indexs = this.totalPage-1;
      }
      if (this.indexs== this.totalPage) {
        this.indexs = 0;
      }
      this.carouselIndex = this.indexs;
      this.dataList.forEach((item, n) => {
        if (this.indexs == n) {
          this.getCarouseldata(item);
          this.carouselForm = item;
        }
      });
    },
    getCarouseldata(row) {
      this.carouselLoading = true;
      getListByzbnd({ cjId: row.id }).then((res) => {
        this.carouselData = res.data.data;
        this.$forceUpdate();
        this.carouselLoading = false;
      });
    },
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if (this.searchadvanced) {
        this.searchheight = "50";
      }
    },
    //获取合同列表
    getDataList() {
      this.dataListLoading = true;
      this.centerDialogVisible = false;
      getPageForWb(
        Object.assign(
          {
            current: this.pageIndex,
            size: this.pageSize,
          },
          this.dataForm
        )
      ).then((response) => {
        this.dataList = response.data.data.records;
        this.totalPage = response.data.data.total;
        if (this.dataList.length > 0) {
          this.getCarouseldata(this.dataList[0]);
          this.carouselForm = this.dataList[0];
        }
        this.dataListLoading = false;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    agree(type) {
      var data = [];
      if (type == "wenben") {
        data.push(this.dataList[this.carouselIndex]);
      } else {
        data = this.$refs.table.selection;
      }
      if (data.length == 0) {
        this.$message.warning("请至少选择一条数据");
      } else {
        var params = {
          rows: data,
          outcome: "通过",
        };
        this.fullscreenLoadingnd = true;
        updateStatusByWbsh(params).then((res) => {
          this.$message.success("审批成功");
          this.fullscreenLoadingnd = false;
          this.getDataList();
        });
      }
    },
    backAll(type) {
      var data = [];
      if (type == "wenben") {
        data.push(this.dataList[this.carouselIndex]);
      } else {
        data = this.$refs.table.selection;
      }
      if (data.length == 0) {
        this.$message.warning("请至少选择一条数据");
      } else {
        var params = {
          rows: data,
          outcome: "驳回",
        };
        this.fullscreenLoadingnd = true;
        updateStatusByWbsh(params).then((res) => {
          this.$message.success("驳回成功");
          this.fullscreenLoadingnd = false;
          this.getDataList();
        });
      }
    },
  },
};
</script>
<style>
.icon-box i {
  margin: 0 8px;
  color: #028ae2;
}

.el-tooltip__popper {
  max-width: 80%;
}

.itembadge {
  margin-top: 10px;
  margin-right: 0px;
}
.inline-block {
  display: inline-block;
}
.bg .el-image-viewer__mask {
  background-color: white;
  opacity: 1;
}
.btns2 {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background: #cbced2;
  opacity: 0.5;
  line-height: 33px;
  text-align: center;
  position: absolute;
  top: 325px;
  left: 10px;
  z-index: 100;
}
.btns {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background: #cbced2;
  opacity: 0.5;
  line-height: 33px;
  text-align: center;
  position: absolute;
  top: 325px;
  right: 10px;
  z-index: 100;
}
.el-carousel__arrow el-carousel__arrow--left{
  display: none;
}
</style>
